// import { Ref } from "vue";
// import { Collection, Feature } from "ol";
// import { Point } from "ol/geom";
// import { Fill, Stroke, Style, Icon, Text } from "ol/style";
// import VectorLayer from "ol/layer/Vector";
// import VectorSource from "ol/source/Vector";
// import cntyPointData from "@/data/cntyPoint";
// import cityPng from "@/assets/images/city.png";
// import shenghuiPng from "@/assets/images/shenghui.png";
// import { Map } from "ol";

// export function useCityLabel(map: Ref<Map | null>) {
//   const setCityLabel = () => {
//     if (!map.value) return;

//     const siteData = cntyPointData.features;
//     const sitePointFeatures = new Collection<Feature>();
//     siteData.forEach((feature) => {
//       const coordinate = feature.geometry.coordinates as [number, number];
//       const sitePointFeature = new Feature(new Point(coordinate));
//       const siteStyle = new Style({
//         image: new Icon({
//           src: cityPng,
//           scale: 1,
//         }),
//         text: new Text({
//           text: `${feature.properties.NAME}`,
//           font: "16px Arial",
//           fill: new Fill({ color: "white" }),
//           stroke: new Stroke({ width: 1, color: "black" }),
//           offsetX: 0,
//           offsetY: -15,
//         }),
//       });

//       const centerStyle = new Style({
//         image: new Icon({
//           src: shenghuiPng,
//           scale: 0.8,
//         }),
//         text: new Text({
//           text: `${feature.properties.NAME}`,
//           font: "14px Arial",
//           fill: new Fill({ color: "white" }),
//           stroke: new Stroke({ width: 1, color: "black" }),
//           offsetX: 0,
//           offsetY: -15,
//         }),
//       });

//       if (feature.properties.ID === "430100") {
//         sitePointFeature.setStyle(centerStyle);
//       } else {
//         sitePointFeature.setStyle(siteStyle);
//       }
//       sitePointFeatures.push(sitePointFeature);
//     });

//     const sitePointSource = new VectorSource({
//       features: sitePointFeatures,
//     });
//     const sitePointLayer = new VectorLayer({
//       source: sitePointSource,
//     });

//     sitePointLayer.setZIndex(map.value.getLayers().getArray().length);
//     map.value.addLayer(sitePointLayer);
//   };

//   return {
//     setCityLabel,
//   };
// }
